<template>
	<view class="content">
		<view class="goods-wrap">
			<view class="goods">
				<view class="goods-item">
					<image class="goods-image" :src="goods.img" mode="widthFix"></image>
				</view>
				<view class="goods-item">
					<view class="goods-title">{{goods.describe}}</view>
					<view class="goods-specification">商品规格：{{goods.content}}</view>
				</view>
				<view class="goods-item">
					<view class="goods-amount"><text></text><text>{{goods.totalPrice}}</text></view>
					<view class="goods-num">数量：x{{goods.num}}</view>
				</view>
			</view>
		</view>
		<view class="btn">
			<uv-btn shape="circle" @click="handleConfirmClick" text="确认兑换"></uv-btn>
		</view>
		<view class="bottom-safe-area"></view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				goods:null,
			}
		},
		onLoad() {
			let goods=uni.getStorageSync('currentIntegralGoods') || {};
			this.goods=goods;
		},
		onUnload() {
			//页面卸载时清除缓存
			try {
			    uni.removeStorageSync('currentIntegralGoods');
			} catch (e) {
			}
		},
		methods: {
			handleConfirmClick(){
				this.$utils.modal({
					content:'确定兑换此商品？',
					callback:(bool)=>{
						if (bool) {
							this.exchangeIntegralRequest();
						};
					}
				});
			},
			exchangeIntegralRequest(){
				this.$u.api.exchangeIntegral({
					
					sku_id:this.goods.sku_id,
					goods_id:this.goods.id,
					num:this.goods.num,
					addr_id: "",//不需要地址，因为我们没有实物商品
				}).then(res=>{
					if(res.code=='1'){
						//兑换成功！回退页面
						this.$utils.toastCallback(res.msg,()=>{
							this.$utils.back(2);
						},true);
					}else{
						this.$utils.modal({
							content:res.msg,
							showCancel:false,
						});
					}
				}).catch(()=>{});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.goods-wrap{
		padding:0 24rpx;
	}
	.goods{
		display: flex;
		align-items:center;
		border-bottom:2rpx solid #e5e5e5;
		padding:20rpx 0;
	}
	.goods-item:nth-child(1){
		width:160rpx;
		margin-right: 20rpx;
	}
	.goods-item:nth-child(2){
		flex: 3;
		
	}
	.goods-item:nth-child(3){
		width:120rpx;
		text-align: right;
		
	}
	.goods-image{
		width:160rpx;
		height:160rpx;
	}
	.goods-title{
		font-size: 24rpx;
		font-weight: 500;
		color: #333;
		line-height: 38rpx;
	}
	.goods-specification{
		font-size: 24rpx;
		font-weight: 500;
		color: #666;
		padding-top: 10rpx;
	}
	.goods-amount text:nth-child(1){
		font-size: 24rpx;
		font-weight: 500;
		color: #FD0303;
	}
	.goods-amount text:nth-child(2){
		font-size: 30rpx;
		font-weight: 500;
		color: #FD0303;
	}
	.goods-num{
		padding-top: 70rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #666;
	}
	.btn{
		padding:0 24rpx;
		padding-top: 100rpx;
	}
</style>

